{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/Sticky_Header/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"ac4ce5af-e11b-593c-add7-23e85fab7f69","excerpt":"sticky header 보통의 경우 in Angular","html":"

sticky header

\n
    \n
  1. \n

    보통의 경우

    \n
    header {\n\tposition: fixed;\n\ttop: 0\n\twidth: 100%\n}\n\nbody {\n\tpadding-top: (header-height)px;\n}
    \n
    <header>\n</header>\n<body>\n</body>
    \n
    2. \n
  2. \n

    in Angular

    \n
    :host {\n\tpadding-top: (header-height)px;\n}\n\nheader{\n\tposition: fixed;\n\ttop: 0\n\twidth: 100%\n}
    \n
    <mapia-header>\n\t<header>\n\t</header>\n</mapia-header>\n<body>\n</body>
    \n
    3. \n
","frontmatter":{"title":"Sticky Header","date":"December 11, 2019"}}},"pageContext":{"slug":"/Today I Learned/Sticky_Header/","previous":{"fields":{"slug":"/Today I Learned/Sticky_Footer/"},"frontmatter":{"title":"Sticky Footer","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/bootsrap_modal_css_코드_::ng-deep으로_캡슐화하기/"},"frontmatter":{"title":"bootsrap modal css 코드 ::ng-deep 으로 캡슐화하기","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}